{include file="public/head"}
    <body>
    <link rel="stylesheet" type="text/css" href="__static__/css/webuploader.css" />
    <div class="x-body">

      <div class="lotus-nav">
            <div class="layui-input-inline">
              <input value="{php}echo isset($_GET['filename'])?$_GET['filename']:'';{/php}"  name="filename"   class="layui-input lotus-input"  placeholder="请输入文件名搜索">
            </div>

            <button class="layui-btn layui-btn-sm search-query"><i class="layui-icon layui-icon-search"></i></button>
            
            <span class="x-right">共有数据:<i class="i_count" style="color: red;font-size: 22px">{$data->total()}</i>条 <button onclick="javascript:location.reload()" class="layui-btn layui-btn-xs"><i class="icon iconfont ">&#xe6aa;</i></button></span>
   
      </div>
      <div class="layui-col-md12">
        <div class="layui-card">
          
          <div class="layui-card-body">
            <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-normal" id="test-upload-testList" onclick="x_admin_show('文件上传','upload.html',300,150)" ><i class="layui-icon">&#xe67c;</i>选择文件</button>
              <input class="layui-upload-file" type="file" accept="undefined" name="file" multiple=""> 
              <span class="layui-badge" style="font-size: 14px">tips:</span>
              <span class="x-left" style="font-size: 13px">仅供系统内部人员使用^_^</span>
            </div> 
          </div>
        </div>
      </div>
    <table class="layui-table">
        <thead>

            <th width="4%">ID</th>
            <th>文件名</th>
            <th width="10%">预览<br><small>(非图片无法预览)</small></th>
            <th width="35%">文件地址</th>
            <th>大小</th>
            <th>操作</th>
        </thead>
        <tbody>

        {volist name="data" id="vo"}
            <tr id='{$vo.id}' >
                
                <td>{$vo.id}</td>
                <td>{$vo.filename}</td>
                <td class="url" ><img onclick="tClick({$vo.id})" id='img-{$vo.id}' src="{$vo.url}" alt=""> </td>
                <td>{php} $request =  \think\Request::instance(); echo $request->domain(); {/php}{$vo.url}</td>
                <td>{$vo.size}</td>
                <td>
                  <button class="layui-btn layui-btn-xs layui-bg-green">
                    <a class="layui-btn-xs layui-bg-green" href="{php} $request =  \think\Request::instance(); echo $request->domain(); {/php}{$vo.url}">下载</a></button>
                  <button onclick="del(this,{$vo.id})" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>

               </td>
            </tr>
        {/volist}

        </tbody>
      </table>
          <div class="page">
            <div>
                {$data->render()}
            </div>
          </div>
    </div>
</body>
{include file="public/foot"}
    <script>
      var layer = layui.layer
            ,form = layui.form;


        $(".search-query").click(function () {
            var filename = $("input[name=filename]").val();
            window.location.href = 'index.html?filename='+filename;
        });

      layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });
       /*用户-停用*/
      function member_stop(obj,id){
          layer.confirm('确认要停用吗？',function(index){
              if($(obj).attr('title')=='启用'){
                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

              }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
              }

          });
      }

      //删除所有
      function delAll (argument) {
        var data = tableCheck.getData();
        layer.confirm('确认要全部删除吗？',function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }

      function del(obj,id){
        var url = $("#"+id).children('td').children('img').attr('src');
        var count = $(".i_count")[0].innerText;
        layer.confirm('确认要删除吗？',function(index){
            //捉到所有被选中的，发异步进行删除
            $.post("{:url('admin/file_system/del')}", {id:id,url:url}, function(data, textStatus, xhr) {
          /*optional stuff to do after success */
              console.log(data);
              if(data.code==1){
                  layer.msg(data.msg,{icon:1,time:1000},function(){
                    $(obj).parents('tr').remove();
                    $(".i_count").html(count-1);
                  });
              }else{
                  layer.msg(data.msg,{icon:2,time:1000});
              }

            });
        });
      }

     

      function tClick(id){
          var url = $('#'+id).children('td').children('img').attr('src');
          //页面层
          // layer.open({
          //   title:'图片',
          //   type: 1,
          //   skin: '', //加上边框
          //   area: ['50%', '60%'], //宽高
          //   content: "<center style=''><img  src="+url+"></center>"
          // });
          //页面层-佟丽娅
          layer.open({
            type: 1,
            title: '文件',
            closeBtn: 1,
            area: ['90%', '100%'], //宽高
            skin: '', //没有背景色
            // shadeClose: true,
            content: "<center style='margin-top:10px'><img style=height:700px; src="+url+"></center>"
          });

      }

    </script>

 </html>
